<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>		  
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>    	
		<script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
        <script>
            //ctp.core.log.lvl=ctp.core.loglvl.info;
            $(document).ready(function(){ 			                 
				var listview1 = new ctp.ui.listview({
                    id: 'listview1',
                    width: '100%',
					validate: 'rules[required,minCheckbox[1]]',	
                    remote:{"url":"combobox_data.json"}
                });			
				var button1= new ctp.ui.button({
                    id: 'button1',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:listview1.getId()});                       
                    }
                });
				var button2= new ctp.ui.button({
                    id: 'button2',
                    text: '取得组件名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getName()});						                        
                    }
                });
				var button3= new ctp.ui.button({
                    id: 'button3',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:listview1.getCtpWebType()});                      
                    }
                });
				var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '取得组件Dom ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:listview1.getDomId()});                       
                    }
                });
				var button5= new ctp.ui.button({
                    id: 'button5',
                    text: '重置',
                    width: '100%',
                    onClick: function(){						
						listview1.reset();                       
                    }
                });
				var disabled = false;
				var button6= new ctp.ui.button({
                    id: 'button6',
                    text: '禁用/启用',
                    width: '100%',
                    onClick: function(){						
						listview1.setDisable(!disabled);
						disabled = !disabled;
                    }
                });
				var button7= new ctp.ui.button({
                    id: 'button7',
                    text: '新增选项',
                    width: '100%',
                    onClick: function(){
						var idx = listview1.getItemsCount()+1;						
						listview1.newItems([{text:'listview'+idx,value:'listview'+idx}]);               
                    }
                });
				var button8= new ctp.ui.button({
                    id: 'button8',
                    text: '设置组件宽度',
                    width: '100%',
                    onClick: function(){						
						listview1.setWidth('80%');               
                    }
                });
				var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){	
						ctpMSB.alert({title:'信息提示',message:listview1.isDisable()});              
                    }
                });
				var textfield1 = new ctp.ui.textfield({
					id: 'textfield1',
					width:'100%',
			  	    value:'请在此输入listview值/选中文本'
				});
				var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '设置组件值',
                    width: '100%',
                    onClick: function(){						
						var val = textfield1.getValue();
						listview1.setValue(val);              
                    }
                });
				var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '设置选中文本',
                    width: '100%',
                    onClick: function(){
						var val = textfield1.getValue();						
						listview1.setSelectedByTexts(val);             
                    }
                });
				var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '修改选项文本',
                    width: '100%',
                    onClick: function(){
						listview1.changeText('listview1','new listview1');
                    }
                });
				var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '取得组件值',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getValue()});       
                    }
                });
				var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '取得所有选项文本',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getAllTexts()});       
                    }
                });
				var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '取得所有选项的值',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getAllValues()});       
                    }
                });
				var textfield2 = new ctp.ui.textfield({
					id: 'textfield2',
					width:'100%',
			  	    value:'请在此输入listview值/选中文本'
				});
				var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '取得该值的选项序号',
                    width: '100%',
                    onClick: function(){
						var val = textfield2.getValue();
						ctpMSB.alert({title:'信息提示',message:listview1.getIndexByValue(val)});       
                    }
                });
				var button17= new ctp.ui.button({
                    id: 'button17',
                    text: '取得该文本的选项序号',
                    width: '100%',
                    onClick: function(){
						var val = textfield2.getValue();
						ctpMSB.alert({title:'信息提示',message:listview1.getIndexByText(val)});       
                    }
                });
				var textfield3 = new ctp.ui.textfield({
					id: 'textfield3',
					width:'100%',
			  	    value:'请在此输入选中序号'
				});
				var button18= new ctp.ui.button({
                    id: 'button18',
                    text: '选中该序号选项',
                    width: '100%',
                    onClick: function(){
						var val = textfield3.getValue();
						listview1.setSelectedByIndexs([parseInt(val)]);       
                    }
                });
				var button19= new ctp.ui.button({
                    id: 'button19',
                    text: '取得选中选项文本',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getSelectedTexts()});       
                    }
                });
				var button20= new ctp.ui.button({
                    id: 'button20',
                    text: '全选',
                    width: '100%',
                    onClick: function(){
						listview1.selectAllItems();       
                    }
                });
				var button21= new ctp.ui.button({
                    id: 'button21',
                    text: '删除全部选项',
                    width: '100%',
                    onClick: function(){
						listview1.delAllItems();       
                    }
                });
				var button22= new ctp.ui.button({
                    id: 'button22',
                    text: '删除选中选项',
                    width: '100%',
                    onClick: function(){
						listview1.delSelectedItems();       
                    }
                });
				var button23= new ctp.ui.button({
                    id: 'button23',
                    text: '取得选中选项数',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getSelectedCount()}); 
                    }
                });
				var button24= new ctp.ui.button({
                    id: 'button24',
                    text: '取得选项数',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:listview1.getItemsCount()}); 
                    }
                });
				var button25= new ctp.ui.button({
                    id: 'button25',
                    text: '设置onChange事件函数',
                    width: '100%',
                    onClick: function(){
						listview1.onChange(function(){
							ctpMSB.alert({title:'信息提示',message:'选项发生了变化'}); 
						});
                    }
                });
				var button26= new ctp.ui.button({
                    id: 'button26',
                    text: '删除组件',
                    width: '100%',
                    onClick: function(){
						listview1.remove();
                    }
                });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '30%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: listview1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7},{element: button8},{element: button9}],
						 [{element: textfield1},{element: button10},{element: button11}],
						 [{element: button12},{element: button13},{element: button14}],
						 [{element: textfield2},{element: button15},{element: button16}],
						 [{element: textfield3},{element: button17},{element: button18}],
						 [{element: button19},{element: button20},{element: button21}],
						 [{element: button22},{element: button23},{element: button24}],
						 [{element: button25},{element: button26}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'listview实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });   
				var validator = new ctp.validator({id:'validator',target:listview1});          
            });	
        </script>
    </head>
    <BODY>
        <b>ctp.ui.listview实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
